<template>
	<view class="baseForm">
		<!-- 选择加工单 -->
		<view class="tab-bar">
			<u-tabs
				:current="activeTab"
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					color: '#3895fc',
					fontWeight: 'bold',
				}"
				lineWidth="50px"
				lineHeight="2px"
				lineColor="#007aff"
				@change="changeTab"></u-tabs>
		</view>

		<view class="" v-if="activeTab == 0">
			<view
				v-if="abnormalReportList.length > 0"
				class=""
				style="padding: 15px; border-radius: 15px; color: #fff">
				<u-button
					@click="supplemenReport"
					style="border-radius: 20px; background-color: #ffbf6b">
					补充报工
				</u-button>
			</view>
			<!-- 当前作业 -->
			<view v-if="abnormalReportList.length > 0">
				<!-- 列表 -->
				<u-list
					ref="tableScroll"
					class="list"
					:height="listHeight"
					lowerThreshold="50px">
					<u-list-item
						v-for="(item, index) in abnormalReportList"
						:key="item.id">
						<view class="card">
							<view class="flex record-title">
								<text class="line1">
									{{ item.materialName }}
								</text>
								<text>
									{{ item.typeName || "无" }}
								</text>
							</view>
							<view
								class="flex flex-col justify-between flex-1 h-full record-content-body">
								<view class="record-content">
									<view class="record-item">
										<text>批次号 {{ item.planBatch }}</text>
										<text>
											合格数量 {{ item.passNumber }}
										</text>
									</view>
									<view class="record-item">
										<text>
											操作者 {{ item.createUser }}
										</text>
										<text>
											报工时间 {{ item.reportTime }}
										</text>
									</view>
									<u-line
										style="margin: 5px 0 2px"
										color="#dadbde"></u-line>
									<view
										style="
											display: flex;
											justify-content: space-between;
										">
										<view class=""></view>
										<view
											@click="selectItem(item, index)"
											style="
												border: 1px solid #313f62;
												padding: 2px 15px 2px 15px;
												border-radius: 15px;
												color: #313f62;
												height: 20px;
												line-height: 20px;
												font-size: 12px;
											">
											取消报工
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
			<view class="flex justify-center" v-show="tableLoading">
				<u-loading-icon color="#000a7b"></u-loading-icon>
			</view>
			<!-- 空数据 -->
			<view v-show="abnormalReportList.length === 0 && !tableLoading">
				<u-empty
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
		<view class="" v-if="activeTab == 1">
			<!-- 列表 -->
			<view class="" v-if="workOrderList[0]?.id">
				<u-list
					ref="tableScrolls"
					class="list"
					:height="listHeight"
					lowerThreshold="50px">
					<u-list-item
						v-for="(item, index) in workOrderList"
						:key="item.id">
						<view class="card">
							<view class="flex record-title">
								<text class="line1">
									{{ item.materialName }}
								</text>
								<text>
									{{ item.typeName || "无" }}
								</text>
							</view>
							<view
								class="flex flex-col justify-between flex-1 h-full record-content-body">
								<view class="record-content">
									<view class="record-item">
										<text>计划开始时间</text>
										<text>
											{{ item.planStart || "无" }}
										</text>
									</view>
									<view class="record-item">
										<text>计划结束时间</text>
										<text class="">
											<text>
												{{ item.planEnd || "无" }}
											</text>
										</text>
									</view>
									<view class="record-item">
										<text>
											计划数量 {{ item.planNumber }}
										</text>
										<text>
											完成数量{{ item.fishedNumber }}
										</text>
									</view>
									<view class="record-item">
										<text>炉批次 {{ item.planBatch }}</text>
										<text>状态 {{ item.status }}</text>
									</view>
									<!-- <u-line
											v-if="workOrderList[0]?.id == item.id"
											style="margin: 5px 0 2px"
											color="#dadbde"></u-line> -->
									<!-- <view class="record-item">
											<view class=""></view>
											<view class=""></view>
											<view
												v-if="
													workOrderList[0].id == item.id
												"
												style="
													padding: 5px 15px 5px 15px;
													border-radius: 5px;
													color: #fff;
													font-size: 12px;
													background-color: #0379ff;
												">
												已选择
											</view>
										</view> -->
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>

			<!-- 空数据 -->
			<view v-show="!workOrderList[0]?.id">
				<u-empty
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
		<!-- 工序选择器 -->
		<u-modal
			:show="showImport"
			ref="uModal"
			:content="`是否取消报工？`"
			confirmText="确认"
			showCancelButton
			@cancel="cancelImport"
			@confirm="confirmImport"></u-modal>
		<u-modal
			:show="showImportSupplemen"
			ref="uModal1"
			confirmText="确认"
			:showCancelButton="true"
			@cancel="cancelImportSupplemen"
			@confirm="confirmImportSupplemen">
			<view class="slot-content">
				<u--form
					labelPosition="left"
					:model="formData"
					ref="uForm"
					:rules="rules"
					labelWidth="110rpx"
					errorType="toast">
					<u-form-item label="类型:">
						<!-- 条码录入 -->
						<u-radio-group v-model="formData.abnormalStatus">
							<u-radio
								:customStyle="{
									fontSize: '12px',
								}"
								shape="square"
								v-for="(
									item, index
								) in useDictionaryStore().filterDictList(
									'abnormalReportType'
								)"
								:key="index"
								:label="item.label"
								:name="item.value"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="数量:" prop="number">
						<u--input
							v-model="formData.number"
							class="inputHeight"
							placeholder="数量"
							clearable></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, toRaw } from "vue";
import { onShow, onPullDownRefresh, onLoad } from "@dcloudio/uni-app";
import { http } from "@/utils/http";
	import ScanBar from '@/components/ScanBarH5/ScanBarH5.vue';
import { PageResult, TabInfo } from "@/types/type";
import { getSecondTime } from "@/utils/common";
import { useDictionaryStore } from "@/stores/useDictionaryStore";

import { useProduceStore } from "@/stores/useProduceStore";

// 实时获取
const workOrderList = computed(() =>
	JSON.parse(useProduceStore().workOrderList)
);
const orientation = ref("");
// 待完成数据
const tableList = ref([]);
const tableLoading = ref(false);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);
//列表高度
const listHeight = ref("");

onLoad(() => {
	// #ifdef H5
	listHeight.value = "calc(100vh - 88px)";
	// #endif

	// #ifdef APP-PLUS
	listHeight.value = "calc(100vh - 48px)";
	// #endif
	// loadmore();

	if (workOrderList.value[0]?.id) {
		abnormalReportList.value = demo;
		// getAbnormalReportList();
	}
});

// 异常报工列表
const getAbnormalReportList = async () => {
	await http({
		method: "GET",
		url: "/eam/equAssetInfo/queryByPage",
		data: {},
	}).then((res) => {
		abnormalReportList.value = res.data;
	});
};

onPullDownRefresh(() => {
	// searchList();
	// uni.stopPullDownRefresh();
});

async function loadmore(type?: string) {
	try {
		current.value += 1;
		tableLoading.value = true;
		const result: PageResult<any> = await http({
			method: "POST",
			url: "/eam/equAssetInfo/queryByPage",
			data: {
				current: current.value,
				size: 20,
				data: {
					searchAssetInfo: value1.value === 1 ? searchText.value : "",
					locationId: value1.value === 2 ? positionId.value : "",
				},
			},
		}).finally(() => {
			tableLoading.value = false;
		});
		const list = result.data;
		for (let i = 0; i < list.length; i++) {
			tableList.value.push(list[i]);
		}
		totalPage.value = result.page;
		total.value = result.total;
		type === "refresh" && uni.stopPullDownRefresh();
	} catch (e) {
		console.log(e);
	}
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};

// 点击扫码
const searchText = ref("");

// 列表搜索
function searchList() {
	// current.value = 0;
	// tableList.value = [];
	// loadmore("refresh");
}

function clearList() {
	console.log("点击");
	searchText.value = "";
	// searchList();
}

// 网页跳转
// async function jump(item) {
// 	uni.navigateTo({
// 		url: `/pages/eam/equ/searchDeviceLedger/detail?assetId=${item.id}`,
// 		fail: () => {
// 			uni.showToast({
// 				title: "敬请期待",
// 				icon: "error",
// 			});
// 		},
// 	});
// }

// --------------------------------------------------------------------- 选择工序
// 假数据
let demo = [
	{
		id: "1",
		materialName: "空压机箱体~K152626~黑件",
		materialCode: "001",
		typeName: "熔炼",
		planStart: "2025-01-12 12:12:12",
		planEnd: "2025-01-12 12:12:12",
		planNumber: 2000,
		fishedNumber: 2000,
		planBatch: 2402234,
		status: "执行",
		passNumber: "20",
		noNumber: "0",
		reportTime: "2025-01-12 12:12:12",
		createUser: "张三",
	},
	{
		id: "2",
		materialName: "空压机箱体~K152626~黑件1",
		materialCode: "001",
		typeName: "造型",
		planStart: "2025-01-12 12:12:12",
		planEnd: "2025-01-12 12:12:12",
		planNumber: 2000,
		fishedNumber: 2000,
		planBatch: 2402234,
		status: "执行",
		passNumber: "",
		noNumber: "20",
		reportTime: "2025-01-12 12:12:12",
		createUser: "张三",
	},
	{
		id: "3",
		materialName: "空压机箱体~K152626~黑件",
		materialCode: "001",
		typeName: "浇注",
		planStart: "2025-01-12 12:12:12",
		planEnd: "2025-01-12 12:12:12",
		planNumber: 2000,
		fishedNumber: 2000,
		planBatch: 2402234,
		status: "执行",
		passNumber: "20",
		noNumber: "",
		reportTime: "2025-01-12 12:12:12",
		createUser: "张三",
	},
	{
		id: "4",
		materialName: "空压机箱体~K152626~黑件",
		materialCode: "001",
		typeName: "浇注",
		planStart: "2025-01-12 12:12:12",
		planEnd: "2025-01-12 12:12:12",
		planNumber: 2000,
		fishedNumber: 2000,
		planBatch: 2402234,
		status: "执行",
		passNumber: "20",
		noNumber: "",
		reportTime: "2025-01-12 12:12:12",
		createUser: "张三",
	},
];

// --------------------------------------------------------------------- 点击tableList item

// --------------------------------------------------------------------- 切换按钮
const activeTab = ref(1);
const tabList = [
	{ name: "异常调整", value: 0 },
	{ name: "当前工单", value: 1 },
];
function changeTab(val: TabInfo) {
	console.log(val);
	activeTab.value = val.index;
}
// --------------------------------------------------------------------- 投料 ---扫描
// 重置表单信息 & 光标自动blur
// 投料列表
const abnormalReportList = ref([]);
const scanBarRef = ref();
const searchContent = ref("");
const datekey = ref(new Date());
function resetFields() {
	searchContent.value = "";
	scanBarRef.value.reset();
	datekey.value = new Date();
}
// 获取扫码结果
function getScanResult(result) {
	if (result) {
		if (workOrderList.value[0]?.id) {
			searchContent.value = result;
			abnormalReportList.value.push(feedDemo);
			resetFields();
		} else {
			resetFields();
			uni.showToast({
				title: "请选择加工单！",
				icon: "none",
			});
		}
	}
}
// 点击投料按钮
const feedHadle = () => {
	if (workOrderList.value[0]?.id) {
		if (scanBarRef.value.scanCode) {
			abnormalReportList.value.push(feedDemo);
			resetFields();
		}
	} else {
		resetFields();
		uni.showToast({
			title: "请选择加工单！",
			icon: "none",
		});
	}
};
// ---------------------------------------------------------------------  投料列表

// 弹窗展示
const showImport = ref(false);
const indexFeed = ref(null);
function cancelImport() {
	showImport.value = false;
}
function confirmImport() {
	showImport.value = false;
	console.log(indexFeed.value);
	abnormalReportList.value.splice(indexFeed.value, 1);
	console.log(abnormalReportList.value);
	// cannelApi()
	uni.showToast({
		title: "取消成功",
	});
}

const cannelApi = async (code) => {
	await http({
		method: "GET",
		url: "/eam/equAssetInfo/queryByPage",
		data: {},
	}).then((res) => {
		if (res.data) {
			getAbnormalReportList();
		}
	});
};

// 点击取消上料

const selectItem = (item, index) => {
	showImport.value = true;
	indexFeed.value = index;
};
// 投料demo
const feedDemo = {
	id: "4",
	materialName: "空压机箱体~K152626~黑件",
	materialCode: "001",
	typeName: "熔炼",
	planStart: "2025-01-12 12:12:12",
	planEnd: "2025-01-12 12:12:12",
	planNumber: 2000,
	feedingTime: "2025-01-12 12:12:12",
	fishedNumber: 2000,
	createUser: "张三",
	planBatch: "2402234",
	status: "执行",
};

// --------------------------------------------------------------------- 补充报工
const abnormalStatus = ref(0);
const formData = ref({
	number: "",
	abnormalStatus: "1",
});
const rest = () => {
	formData.value.number = "";
	formData.value.abnormalStatus = "1";
};

const demo2 = {
	id: "5",
	materialName: "空压机箱体~K152626~黑件111",
	materialCode: "001",
	typeName: "浇注",
	planStart: "2025-01-12 12:12:12",
	planEnd: "2025-01-12 12:12:12",
	planNumber: 2000,
	fishedNumber: 2000,
	planBatch: 2402234,
	status: "执行",
	passNumber: "20",
	noNumber: "",
	reportTime: "2025-01-12 12:12:12",
	createUser: "张三",
};

// 弹窗展示
const showImportSupplemen = ref(false);
const indexFeed1 = ref(null);
function cancelImportSupplemen() {
	showImportSupplemen.value = false;
}
const uForm = ref();
function confirmImportSupplemen() {
	uForm.value.validate().then(async (valid: any) => {
		if (valid) {
			showImportSupplemen.value = false;
			abnormalReportList.value.push(demo2);
			uni.showToast({
				title: "报工成功",
			});
			rest();
		}
	});
}
// 点击取消上料

const supplemenReport = () => {
	showImportSupplemen.value = true;
};
// 表单规则定义
const rules = ref({
	number: {
		type: "number",
		required: true,
		max: 20,
		message: "数量为正数",
		trigger: ["change"],
	},
});
// ---------------------------------------------------------------------
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
	background-color: #fbfbff;
}
.search {
	:deep(.u-search__content) {
		box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	}
}
.baseForm {
	background-color: #fbfbff;
	.tab-bar {
		padding: 0 20px;
	}
	.upload-scan {
		padding: $uni-page-padding;
		padding-top: 5px;
		padding-bottom: 5px;
		display: flex;
		align-items: center;
		// box-shadow: 0 1px 10px 0px rgb(19 10 236 / 10%);
		.u-icon {
			margin-left: 8px;
		}
	}
	.u-line {
		padding: 10px 0;
	}
}
.list {
	.card {
		margin: $uni-page-padding;
		margin-top: 5px;
		margin-bottom: 4px;
		border-radius: 7px;
		padding: 12px 12px 0px 12px;
		transition: all 300ms ease;
		border: 1px solid #efefef;
		background-color: #fff;
		.card-flex {
			display: flex;
			align-items: flex-start;
		}
		.right {
			flex: 1;
		}
		.title {
			font-size: 14px;
			line-height: 40px;
			height: 40px;
			margin-top: 8px;
			font-weight: bold;
			color: #101010;
			border-top: 1px solid #e5ebff;
		}
		.uni-btn {
			float: right;
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			padding: 0 15px;
			margin-top: 7px;
			font-weight: 400;
		}
		.des {
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 3px;
		}
		.left {
			flex-basis: calc(50% + 10px);
		}
	}
}

.record-title {
	display: flex;
	justify-content: space-between;
	margin: 2px 0 2px 0;
	color: $primary-color;
	uni-text:nth-child(1) {
		font-weight: bold;
		font-size: 15px;
	}
	uni-text:nth-child(2) {
		font-weight: bold;
		font-size: 15px;
		min-width: 60px;
		text-align: right;
	}
}
.record-item {
	margin: 7px 0 !important;
	color: #8f8e94 !important;
	word-break: break-all;
	font-size: 13px;
}
.record-item1 {
	color: #8f8e94 !important;
	word-break: break-all;
	font-size: 13px;
}
.record-content .record-item > :first-child {
	min-width: 70px !important;
}
:deep(.input-box) {
	// width: calc(100% - 56px);
	width: 100%;
	// border: 0.5px solid #dadbde !important;
	border-radius: 100px;
	height: 32px;
	line-height: 32px;
	box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	background-color: #fff;
	.u-input {
		pointer-events: none;
		height: 32px;
		line-height: 32px;
		padding-left: 10px !important;
	}
	.uni-input-placeholder {
		color: rgb(144, 147, 153) !important;
		font-size: 14px;
	}
	.u-icon__icon {
		font-size: 22px !important;
		line-height: 22px;
		font-weight: normal;
		top: 0px;
		color: rgb(144, 147, 153) !important;
	}
	image {
		padding: 6px 6px;
		width: 20px;
		height: 20px;
	}
}

:deep(.search-btn) {
	width: 32px;
	height: 34px;
	margin-left: 4px;
	border-radius: 4px;
	background-color: transparent;
	border: none;
	// .u-icon__icon {
	// 	margin-left: 5px;
	// 	color: rgb(96, 98, 102) !important;
	// 	font-size: 26px !important;
	// }
	.u-button__text {
		color: rgb(96, 98, 102) !important;
	}
}

:deep(.searchButton) {
	color: rgb(41, 121, 255);
	font-size: 14px;
	width: 52px !important;
	min-width: 52px !important;
	display: flex;
	justify-content: flex-start;
	.u-icon {
		margin-left: 2px !important;
		font-size: 14px;
		.u-icon__icon {
			font-size: 14px !important;
			line-height: 14px !important;
		}
	}
}

:deep(.u-dropdown) {
	flex: none !important;
	width: 52px;
	.u-cell-group__wrapper {
		// border: 1px solid rgb(214, 215, 217);
		// border-radius: 4px;
		border-right: 1px solid rgb(214, 215, 217);
		border-left: 1px solid rgb(214, 215, 217);
	}
	// .u-line { display: none;}
	.u-cell__body {
		padding: 8px 10px !important;
		// border: 1px solid #8f8e94;
	}
	.u-dropdown__content__mask {
		background-color: transparent;
	}
}
// :deep(.u-drawdown-item__content) {
// 	top: 88px !important;
// 	.common-search {
// 		display: flex;
// 		justify-content: flex-start;
// 		margin: 0 15px;
// 		padding: 13px 5px;
// 		border-bottom: 1px solid rgb(214, 215, 217);
// 	}
// }

// :deep(.dis-none){
// 		.u-dropdown__content{
// 			display: none;
// 		}
// 	}
</style>
